import { TabCategoryWrapper } from "@/styles/tab-category";
import { Col, Divider, Row } from "antd";
import Image from "next/image";
import React, { FC, memo, ReactElement } from "react";
import { ICategorys } from "../type/homeType";

interface IProps {
  children?: ReactElement;
  categorys?: ICategorys[];
}

const TabCatrgory: FC<IProps> = (props: IProps) => {
  const { categorys = [] } = props;
  return (
    <TabCategoryWrapper>
      <div className="category">
        <Row
          gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}
          justify="center"
          align="middle"
        >
          {categorys.map((item) => {
            return (
              <Col className="gutter-row" span={6} key={item.cid}>
                <Image width={50} height={50} src={item.picStr} alt=""></Image>
                <div className="text">{item.title}</div>
              </Col>
            );
          })}
        </Row>
      </div>
      <Divider />
    </TabCategoryWrapper>
  );
};

export default memo(TabCatrgory);
